﻿/*
yChart图标组件
yh 20170321
demo:
var yChart = new $.YChart({ dom: '.demo-chart'});
yChart.init(); # # # # # # # # # #91e8e1
*/
(function () {
    var defaults = {
        //容器
        dom: '.demo-chart'
        //内容项背景色
        , itemColors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1']
        //数据
        , data: [
            {
                "Value": 20,
                "SHA1": "2cd9a4fc060ccfd275f01168a85b76a3cd18f84f",
                "Name": "演示1",
                "Children": [
                    {
                        "Value": 5,
                        "SHA1": "49d5cf02cacd2f32d3a3b02d5f93fc087eeeb0d4",
                        "Name": "A",

                    },
                    {
                        "Value": 15,
                        "SHA1": "49d5cf02cacd2f32d3a3b02d5f93fc087eeeb0d4",
                        "Name": "B",

                    }
                ]
            }, {
                "Value": 14,
                "SHA1": "2cd9a4fc060ccfd275f01168a85b76a3cd18f84f",
                "Name": "演示2",
                "Children": [
                    {
                        "Value": 8,
                        "SHA1": "49d5cf02cacd2f32d3a3b02d5f93fc087eeeb0d4",
                        "Name": "C",

                    },
                    {
                        "Value": 6,
                        "SHA1": "49d5cf02cacd2f32d3a3b02d5f93fc087eeeb0d4",
                        "Name": "D",

                    }
                ]
            }
        ]
        //图表宽度
        , width: 900
        //图表高度
        , height: 300
        //X轴名称
        , titleX: 'X轴'
        //Y轴名称
        , titleY: 'Y轴'
        //图表背景
        , bg: '#ffffff'
        //点击回调(返回点中项)
        , callback: function ($dom) {
        }
        , callbackTitle: function ($dom) {
        }
    };
    var YChart = function (opts) {
        var that = this;
        that.opts = {};
        that.$wrap = null;
        this.init = function () {
            that.opts = $.extend({}, defaults, opts);
            that.$wrap = $(that.opts.dom);
            that.$wrap.html(that.createHtml());
            that.$wrap.delegate('.row', 'click', function () {
                var $item = $(this);
                if (opts.callback) {
                    opts.callback($item);
                }
                return false;
            });

            that.$wrap.delegate('.chart-col-title', 'click', function () {
                var $item = $(this);
                console.log(1);
                if (opts.callbackTitle) {
                    opts.callbackTitle($item);
                }
                return false;
            });



        };
    };
    YChart.prototype.createHtml = function () {
        var that = this;
        that.opts.width -= 100;
        that.opts.height -= 60;
        var html = '<div class="chart-wrap-outer" style="margin: 0 auto;width:' + that.opts.width + 'px;height:' + that.opts.height + 'px;background:' + that.opts.bg + '">';
        html += '<div class="chart-wrap" style="width:' + that.opts.width + 'px;height:' + that.opts.height + 'px">';

        var data = that.opts.data;

        var max = 0;
        var cols = data.length;
        $.each(data, function (i, item) {
            if (item.Value > max) {
                max = item.Value;
            }
        });
        //每列宽度
        var colWidth = Math.floor(that.opts.width / cols / 2);
        //高度比例
        var f = (that.opts.height - 40) / max;
        var bgIndex = 0;
        var cbgIndex = 0;

        $.each(data, function (i, item) {
            html += '<div class="col" style="width:' + colWidth + 'px;height:' + item.Value * f + 'px;background:' + that.opts.itemColors[cbgIndex] + '">';
            cbgIndex = ++cbgIndex % that.opts.itemColors.length;
            var styleOffset = 'width:' + (colWidth * 1.8) + 'px;left:' + (-0.9 * colWidth / 2) + 'px';
            html += '   <div class="chart-col-title" data-id="' + item.SHA1 + '" style="' + styleOffset + '" title="' + item.Name + '">' + item.Name.substr(0, 20) + '</div>';
            $.each(item.Children, function (j, jtem) {
                html += '   <div class="row" style="height:' + jtem.Value * f + 'px;background:' + that.opts.itemColors[bgIndex] + '" title="' + jtem.Name + '" data-id="' + jtem.SHA1 + '">' + jtem.Value + '</div>';
                bgIndex = ++bgIndex % that.opts.itemColors.length;

            });
            html += '   <div class="num" style="' + styleOffset + '">' + item.Value + '</div>';
            html += '</div>';
        });

        html += '<div class="chart-x">' + that.opts.titleX + '</div>';
        html += '<div class="chart-y">' + that.opts.titleY + '</div>';
        html += '</div></div>';
        return html;
    };
    $.YChart = YChart;
})();